<template>
    <div id="person">

        <!-- 个人 -->
        <div id="person-header">
            <div class="person-header-top">
                <img src="img/1.jpg" alt="" @click="ImagePreview()">
                <div class="person-header-top-container">
                    <big @click="onLoginPerson()" v-if="userName == ''">立即登录</big>
                    <big @click="onLoginPerson()" v-else>{{userName}}</big>
                    <p>积分：310</p>
                    <div v-if="logout == ''"></div>
                    <div v-else @click="exit()">{{logout}}</div>
                </div> 
            </div>
            <!-- 通知栏 -->
            <van-notice-bar
                left-icon="volume-o"
                scrollable 
                color="#E15353" 
                background="#fff" 
                text="新上线更稳定的付费快递查询接口"
            />
        </div>

        <!-- 我的订单：待付款、待发货、待收货、待评价 -->
        <div id="person-order">
            <div class="person-order-top">
                <div class="person-order-top-left">
                    <van-icon name="notes-o" size="21" color="#F7B84D" />
                    <span>我的订单</span>
                </div>
                <van-icon name="arrow" size="19" style="margin-right:3%" />
            </div>
            <ul>
                <li>
                    <van-icon name="paid" size="30" />
                    <span>待付款</span>
                </li>
                <li>
                    <van-icon name="send-gift-o" size="30" />
                    <span>待发货</span>
                </li>
                <li>
                    <van-icon name="logistics" size="30" />
                    <span>待收货</span>
                </li>
                <li>
                    <van-icon name="comment-o" size="30" />
                    <span>待评价</span>
                </li>
            </ul>
        </div>

        <!-- 余额、砍价、礼券、收藏、地址、客服 -->
        <div id="person-container">
            <ul>
                <li>
                    <van-icon name="gold-coin-o" size="30" color="#E15353" />
                    <span>我的余额</span>
                </li>
                <li>
                    <van-icon name="edit" size="30" color="#E15353" />
                    <span>我的砍价</span>
                </li>
                <li>
                    <van-icon name="coupon-o" size="30" color="#F7B84D" />
                    <span>我的礼券</span>
                </li>
            </ul>
            <ul>
                <li>
                    <van-icon name="star-o" size="30" color="#F7B84D" />
                    <span>我的收藏</span>
                </li>
                <li @click="onLogin()">
                    <van-icon name="location" size="30" color="#5A9FEC" />
                    <span>我的地址</span>
                </li>
                <li>
                    <van-icon name="service-o" size="30" color="#5A9FEC" />
                    <span>联系客服</span>
                </li>
            </ul>
        </div>

        <div id="person-work">
            The work of liu tao
        </div>

        
        
    </div>
</template>

<script>
// 图片预览
import { ImagePreview } from 'vant';

export default {
    data() {
        return {
            userName:"",
            logout:"",  
        }
    },
    mounted() {
        let mobile = localStorage.mobile;
        if(mobile){
            this.userName = mobile;
        }

        let token = localStorage.token;
        if(token){
            this.logout = "退出登录";
        }
    },
    methods: {
        // 图片预览
        ImagePreview(){
            ImagePreview(['img/1.jpg']);
        },
        // 点击 跳转 登录页面
        onLoginPerson(){
            var token = localStorage.getItem("token");

            if(token){
                
            }else{
                this.$router.push("/Login");
            }
        },
        // 我的地址
        onLogin(){
            var token = localStorage.getItem("token");
            console.log(token);

            if(token){
                this.$router.push("/Site");
            }else{
                this.$router.push("/Login");
                this.$message("登录后再试！");
            }
        },
        // 退出登录
        exit(){
            this.userName = [];
            this.logout = [];
            localStorage.removeItem("token");
            localStorage.removeItem("mobile");
        }
    },
}
</script>

<style lang="scss">
#person{
    width:100%;
    height: 100%;
    font-size: 0.26rem;
    background-color: #F5F5F5;
    #person-header{
        width:100%;
        background-color: #fff;
        .person-header-top{
            width:92%;
            height:2rem;
            padding:0.55rem 4%;
            color:#fff;
            background-color: #C1B18F;
            display: inline-flex;
            justify-content: space-between;
            align-items: flex-start;
            img{
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
            }
            .person-header-top-container{
                width:4.6rem;
                big{
                    font-size: 0.45rem;
                }
                p{
                    width:40%;
                    padding:0.15rem;
                    border-radius: 0.1rem;
                    background-color: #B6A37D;
                }
            }
        }
        .van-notice-bar{
            font-size: 0.24rem;
        }
    }
    // 我的订单
    #person-order{
        width:100%;
        // padding:0 4%;
        background-color: #fff;
        margin: 0.22rem 0;
        .person-order-top{
            width:100%;
            font-size: 0.25rem;
            padding:0.3rem 0 0.3rem 0;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 0.01rem solid lightgray;
            .person-order-top-left{
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
                margin-left: 3%;
                span{
                    margin:0 0.22rem;
                }
            }
        }
        ul{
            width:92%;
            height:1.5rem;
            padding-bottom: 0.2rem;
            margin:0 4%;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            li{
                width:20%;
                height:60%;
                text-align: center;
                color:#6D6D6D;
                .van-icon{
                    width:100%;
                }
                margin-top: 0.1rem;
            }
        }
    }
    #person-container{
        width:100%;
        background-color: #fff;
        ul{
            width:100%;
            height:1.5rem;
            padding: 0.1rem 0;
            display: inline-flex;
            justify-content: space-between;
            align-items: center;
            li{
                width:33%;
                height:100%;
                text-align: center;
                .van-icon,i{
                    width:100%;
                    padding:0.2rem 0;
                }
            }
        }
    }
    #person-work{
        width:100%;
        color:#6D6D6D;
        text-align: center;
        padding: 0.06rem 0;
    }
}
</style>